<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>jquery图片轮播, banner 原创</title>
  <!-- jQuery Script -->
  <style>
    * {
      padding: 0;
      margin: 0
    }

    .slider {
      position: relative;
      height: 400px;
      min-width: 1004px;
      width: 100%;
      overflow: hidden;
    }

    .slider .slider-pointer {
      position: absolute;
      bottom: 20px;
      color: #fff;
      list-style: none;
      padding: 0;
      z-index: 999;
    }

    .slider .slider-pointer li {
      display: inline-block;
      margin: 0 15px;
      width: 15px;
      height: 15px;
      border-radius: 15px;
      background-color: #ffffff;
      opacity: 0.85;
      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
      transition: all 320ms ease;
    }

    .slider .slider-pointer li:hover {
      background-color: #e30006;
    }

    .slider .slider-pointer li.active {
      background-color: #b00005;
    }

    .slider .slider-inner {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .slider .slider-inner .item {
      width: 100%;
      height: 100%;
      float: left;
    }

    .slider .slider-inner .img {
      background-position: center top !important;
      width: 100%;
      height: 100%;
    }

    .slider .slider-control {
      position: absolute;
      width: 30px;
      height: 30px;
      z-index: 999;
      border-radius: 30px;
      text-align: center;
      font-weight: 900;
      font-size: 20px;
      line-height: 30px;
      background-color: #ffffff;
      opacity: 0.5;
      cursor: pointer;
      top: 40%;
      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
      transition: all 320ms ease;
    }

    .slider .slider-control:hover {
      opacity: 0.65;
      background-color: #b00005;
    }

    .slider .slider-control:active {
      opacity: 0.85;
    }

    .slider .slider-control.prev {
      display: none;
      left: 20px;
    }

    .slider .slider-control.next {
      display: none;
      right: 20px;
    }

    .slider:hover .slider-control.prev {
      display: block;
      left: 20px;
    }

    .slider:hover .slider-control.next {
      display: block;
      right: 20px;
    }
  </style>
</head>

<body>
  <div class="slider" id="slider">
    <div class="slider-inner">
      <div class="item">
        <img class="img" style="background: url('slide_1.jpg');">
      </div>
      <div class="item">
        <img class="img" style="background: url('slide_2.jpg');">
      </div>
      <div class="item">
        <img class="img" style="background: url('slide_3.jpg');">
      </div>
    </div>
  </div>

  <script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script>
  <script>
    /**
     * Author         : CheneyLiu
     * Date           : date
     * isAuto:        true, 自动播放
     * transTime:     3000, 自动播放间隔
     * animateSpeed:  1000,  动画速度
     * sliderMode:    'slide', 类型//'slide | fade',
     * pointerControl: true, 指示器开关 ,下面的dot
     * pointerEvent:  'click', 指示器类型//'hover' | 'click',
     * arrowControl:  true, 左右控制
     */
    ;
    (function ($) {
      $.fn.Slider = function (options) {
        "use strict";

        var settings = $.extend({
          isAuto: true,
          transTime: 4000,
          animateSpeed: 1000,
          sliderMode: 'slide', //'slide | fade',
          pointerControl: true,
          pointerEvent: 'click', //'hover' | 'click',
          arrowControl: true,
        }, options);
        var interval;
        var isAnimating = false;
        var $slider = $(this);
        var $sliderWrap = $slider.find('.slider-inner');
        var sliderCount = $sliderWrap.find('> .item').length;
        var sliderWidth = $slider.width();
        var currentIndex = 0;

        var sliderFun = {
          controlInit: function () {
            // pointerControl
			// 初始化dot并且居中显示
            if (settings.pointerControl) {
              var html = '';
              html += '<ol class="slider-pointer">';
              for (var i = 0; i < sliderCount; i++) {
                if (i == 0) {
                  html += '<li class="active"></li>'
                } else {
                  html += '<li></li>'
                }
              }
              html += '</ol>'
              $slider.append(html);
              // 指示器居中
              var $pointer = $slider.find('.slider-pointer');
              $pointer.css({
                left: '50%',
                marginLeft: -$pointer.width() / 2
              });
            }
            // pointerControl
            if (settings.arrowControl) {
              var html = "";
              html += '<span class="slider-control prev">&lt;</span>';
              html += '<span class="slider-control next">&gt;</span>'
              $slider.append(html);
            }
            $slider.on('click', '.slider-control.prev', function (event) {
              sliderFun.toggleSlide('prev');
            });
            $slider.on('click', '.slider-control.next', function (event) {
              sliderFun.toggleSlide('next');
            });
          },
          // slider
          sliderInit: function () {
            sliderFun.controlInit();
            // 模式选择
            if (settings.sliderMode == 'slide') {
              // slide 模式
              $sliderWrap.width(sliderWidth * sliderCount);
              $sliderWrap.children().width(sliderWidth);
            } else {
              // mode 模式
              $sliderWrap.children().css({
                'position': 'absolute',
                'left': 0,
                'top': 0
              });
              $sliderWrap.children().first().siblings().hide();
            }
            // 控制事件
            if (settings.pointerEvent == 'hover') {
              $slider.find('.slider-pointer > li').mouseenter(function (event) {
                sliderFun.sliderPlay($(this).index());
              });
            } else {
              $slider.find('.slider-pointer > li').click(function (event) {
                if (currentIndex != $(this).index()) {
                  sliderFun.sliderPlay($(this).index())
                }
              });
            }
            // 自动播放
            sliderFun.autoPlay();
          },
          // slidePlay
          sliderPlay: function (index) {
            sliderFun.stop();
            isAnimating = true;
            $sliderWrap.children().first().stop(true, true);
            $sliderWrap.children().stop(true, true);
            $slider.find('.slider-pointer').children()
              .eq(index).addClass('active')
              .siblings().removeClass('active');
            if (settings.sliderMode == "slide") {
              // slide
              if (index > currentIndex) {
                $sliderWrap.animate({
                  left: '-=' + Math.abs(index - currentIndex) * sliderWidth + 'px'
                }, settings.animateSpeed, function () {
                  sliderFun.stop();
                  isAnimating = false;
                  sliderFun.autoPlay()
                });
              } else if (index < currentIndex) {
                $sliderWrap.animate({
                  left: '+=' + Math.abs(index - currentIndex) * sliderWidth + 'px'
                }, settings.animateSpeed, function () {
                  isAnimating = false;
                  sliderFun.autoPlay();
                });
              } else {
                return;
              }
            } else {
              // fade
              if ($sliderWrap.children(':visible').index() == index) return;
              $sliderWrap.children().fadeOut(settings.animateSpeed)
                .eq(index).fadeIn(settings.animateSpeed, function () {
                  isAnimating = false;
                  sliderFun.autoPlay();
                });
            }
            currentIndex = index;
          },
          // toggleSlide
          toggleSlide: function (arrow) {
            if (isAnimating) {
              return;
            }
            var index;
            if (arrow == 'prev') {
              index = (currentIndex == 0) ? sliderCount - 1 : currentIndex - 1;
              sliderFun.sliderPlay(index);
            } else if (arrow == 'next') {
              index = (currentIndex == sliderCount - 1) ? 0 : currentIndex + 1;
              sliderFun.sliderPlay(index);
            }
          },
          // autoPlay
          autoPlay: function () {
            if (settings.isAuto) {
              interval = setInterval(function () {
                var index = currentIndex;
                (currentIndex == sliderCount - 1) ? index = 0: index = currentIndex + 1;
                sliderFun.sliderPlay(index);
              }, settings.transTime);
            } else {
              return;
            }
          },
          //stop
          stop: function () {
            clearInterval(interval);
          },
        };


		// 调用206行
        sliderFun.sliderInit();
      }
    })(jQuery);


    // $.fn.Slider 在原型链上增加了一个函数，这里直接调用，不传入任何参数，所以都是默认的
    jQuery(document).ready(function ($) {
      $('#slider').Slider();
    });
  </script>
</body>

</html>